<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">  
</head>
<body class="dpflex fdcolum">

    <!-- 头部主体 -->
    <div class="topmian flex1">
        <!-- 轮播图 -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="./img/index-swiper-bg1.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./img/index-swiper-bg2.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./img/index-swiper-bg3.jpg" alt="">
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>
        <!-- 排名与打卡 -->
        <div class="content mt20">
            <div class="dpflex">
                <div class="rank mr20">
                    <h3 class="pd10 pll0 c10">今日排名</h3>
                    <span class="ranknum" id="rankNum"></span>
                </div>
                <div class="punch c10">
                    <h3 class="pd10 pll0">累计打卡<span id="punchDay"></span>天</h3>
                    <div class="today" id="todayPunch">今日打卡</div>
                </div>
            </div>
            <!-- 运动数据 -->
            <div class="sport dpflex">
                <div class="sport-data flex1 mt20 pd10 pll0">运动数据</div>
                <div class="sport-badge flex1 mt20 pll0">
                    <p class="pd10 pll0 c10 fw">累计运动徽章</p>
                    <span class="fs" id="badgeNum"></span>枚
                </div>
            </div>
            <!-- 课程训练 -->
            <div class="train mt20 pd10 pll0">
                <p>课程训练</p>
            </div>
            <!-- 跑步 -->
            <div class="run mt20 pd10 pll0">
                <p>户外跑步</p>
            </div>
        </div>
    </div>
    <!-- 尾部 -->
    <div class="footer" id="footer">
    </div>
    <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>  
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</body>
</html>